import React, { useEffect, useState } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import axios from "axios";

import Home from "../../views/sandbox/home/home";
import UserList from "../../views/sandbox/user-manage/UserList";
import RoleList from "../../views/sandbox/right-manage/RoleList";
import RightList from "../../views/sandbox/right-manage/RightList";
import NewsAdd from "../../views/news-manage/NewsAdd";
import NewsCategory from "../../views/news-manage/NewsCategory";
import NewsDraft from "../../views/news-manage/NewsDraft";
import NewsPreview from "../../views/news-manage/NewsPreview";
// import NewsUpdate from "../../views/news-manage/NewsUpdate";
import Audit from "../../views/audit-manage/Audit";
import AuditList from "../../views/audit-manage/AuditList";
import Unpublished from "../../views/publish-manage/Unpublished";
import Published from "../../views/publish-manage/Published";
import Sunset from "../../views/publish-manage/Sunset";
// import Erro from '../Error/Erro'

// 对应的本地路由映射表  跟后端确定好的。
const localRouterMap = {
  "/home": <Home />,
  "/user-manage/list": <UserList />,
  "/right-manage/role/list": <RoleList />,
  "/right-manage/right/list": <RightList />,
  "/news-manage/add": <NewsAdd />,
  "/news-manage/draft": <NewsDraft />,
  "/news-manage/category": <NewsCategory />,
  "/news-manage/preview/:id": <NewsPreview />,
  // "/news-manage/update/:id": <NewsUpdate />,
  "/audit-manage/audit": <Audit />,
  "/audit-manage/list": <AuditList />,
  "/publish-manage/unpublished": <Unpublished />,
  "/publish-manage/published": <Published />,
  "/publish-manage/sunset": <Sunset />,
};
export default function NewsSandBox() {
  //放扁平化的数据 后端返回的数据
  const [BackRouteList, setBackRouteList] = useState([]);
  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem("token"));

  useEffect(() => {
    //想要得到两个请求的数据，合并放在状态里，用promise.all
    Promise.all([
      axios.get("http://localhost:5000/rights"),
      axios.get("http://localhost:5000/children"),
    ]).then((res) => {
      //得到的数组对应请求 ,展开并合并,从而拿到所有权限名称以及路径、
      setBackRouteList([...res[0].data, ...res[1].data]);
      console.log([...res[0].data, ...res[1].data]);
    });
  }, []);
  //判断权限开关的状态
  const checkRoute = (item) => {
    // console.log(item.routepermisson);
    //必须是路径相等，并且后台返回的数据的pagepermisson状态值不为0.   &&全真为真才为真
    return (
      localRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    );
  };
  //判断用户登录是几级权限
  const checkUserPermission = (item) => {
    //判断保存的rights里有没有后台的key。以免直接输入路径进入页面
    return rights.includes(item.key);
  };
  return (
    <Routes>
      {/* 设置默认子路由 */}
      <Route index element={<Home />}></Route>
      {/* <Route path="/home" element={<Home/>}></Route>
      <Route path='/user-manage/list' element={<UserList/>}></Route>
      <Route path='/right-manage/role/list' element={<RoleList/>}></Route>
      <Route path='/right-manage/right/list' element={<RightList/>}></Route>   */}

      {/*
       动态展示路由 ,需要路由更加精确遍历
      */}
      {BackRouteList.map((item) => {
        //有权限的话返回路由组件，否则没有权限查看。
        //checkRoute判断权限开关的 checkUserPermission判断当前登录用户的权限级别
        if (checkRoute(item) && checkUserPermission(item)) {
          return (
            <Route
              path={item.key}
              key={item.key}
              element={localRouterMap[item.key]}
            ></Route>
          );
        }
      })}

      {/* 如果有路径不存在或非法，重定向到home */}
      <Route path="*" element={<Navigate to="/home"></Navigate>}></Route>

      {/* 也可跳转到一个新的组件，进行告知提醒 */}
      {/* 为了避免网速慢的情况下，数据还没有回来会出现403的情况，如果这个数据的长度大于0才进行渲染 */}
      {/* <Route path="*" element={<Erro/>}></Route> */}
      {BackRouteList.length > 0 && <Route path="*" element={<Home />}></Route>}
    </Routes>
  );
}
